<template>
  <div>
    <div class="addBtn">
      <span class="span">说明：目前支持学科和关键字条件筛选</span>
      <el-button type="success" icon="el-icon-edit">新增试题</el-button>
    </div>
    <div>
      <el-form
        ref="formInline"
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        label-position="right"
        label-width="80px"
      >
        <!-- 第一行表单 -->
        <el-row>
          <el-form-item label="学科" prop="subjectID">
            <el-select
              v-model="formInline.subjectID"
              placeholder="请选择"
              @change="subjectChange"
            >
              <el-option
                v-for="item in formInline.subjectList"
                :key="item.id"
                :label="item.subjectName"
                :value="item.id"
              ></el-option>
              <!-- <el-option label="区域二" value="beijing"></el-option> -->
            </el-select>
          </el-form-item>
          <el-form-item label="二级目录" prop="catalogID">
            <el-select v-model="formInline.catalogID" placeholder="请选择">
              <el-option
                v-for="item in formInline.catalogList"
                :key="item.id"
                :label="item.directoryName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="标签" prop="tags">
            <el-select v-model="formInline.tags" placeholder="请选择">
              <el-option
                v-for="item in formInline.tagsList"
                :key="item.id"
                :label="item.tags"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="关键字">
            <el-input
              v-model="formInline.keyword"
              class="inputwidth"
              placeholder="根据题干搜索"
            ></el-input>
          </el-form-item>
        </el-row>
        <!-- 第二行表单 -->
        <el-row>
          <el-form-item label="试题类型" prop="questionType">
            <el-select v-model="formInline.questionType" placeholder="请选择">
              <el-option
                v-for="(item, index) in formInline.questionTypeList"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="难度">
            <el-select v-model="formInline.difficulty" placeholder="请选择">
              <el-option
                v-for="(item, index) in formInline.difficultyList"
                :key="index"
                :label="item.label"
                :value="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="方向" prop="direction">
            <el-select v-model="formInline.direction" placeholder="请选择">
              <el-option
                v-for="(item, index) in formInline.directionList"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="录入人">
            <el-select v-model="formInline.creatorID" placeholder="请选择">
              <el-option
                v-for="(item, index) in formInline.creatorIDList"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <!-- 第三行表单 -->
        <el-row>
          <el-form-item label="题目备注">
            <el-input
              v-model="formInline.remarks"
              class="inputwidth"
            ></el-input>
          </el-form-item>
          <el-form-item label="企业简称">
            <el-input
              v-model="formInline.shortName"
              class="inputwidth"
            ></el-input>
          </el-form-item>
          <el-form-item label="城市">
            <!-- 省份 -->
            <el-select
              v-model="formInline.province"
              placeholder="请选择"
              @change="proChange"
              style="width: 108px; margin-right: 5px"
            >
              <el-option
                v-for="(item, index) in formInline.provinceList"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
            <!-- 地区 -->
            <el-select
              v-model="formInline.city"
              placeholder="请选择"
              style="width: 108px"
            >
              <el-option
                v-for="(item, index) in formInline.cityList"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <div class="clearDiv">
            <el-button
              size="small"
              type="primary"
              plain
              class="clearBtn"
              @click="resetForm('formInline')"
              >清除</el-button
            >
            <el-button type="primary" class="clearBtn" size="small"
              >搜索</el-button
            >
          </div>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
// import { provinces, citys } from '../../../api/hmmm/citys'
import { list } from '@/api/hmmm/subjects'
import { detail } from '@/api/hmmm/directorys'
import { questionType } from '@/api/hmmm/constants'
import { difficulty } from '@/api/hmmm/constants'
import { direction } from '@/api/hmmm/constants'
import { provinces, citys } from '@/api/hmmm/citys'

export default {
  data() {
    return {
      // 下拉选项

      formInline: {
        subjectList: [], //学科列表
        catalogList: [], //目录列表
        tagsList: [], //标签列表
        questionTypeList: [], //试题类型列表
        difficultyList: [], //难度列表
        directionList: [], //方向列表
        creatorIDList: [], //录入人列表
        provinceList: [], //省份列表
        cityList: [], //城市列表

        keyword: '', //关键字
        remarks: '', //题目备注
        shortName: '', //企业简称

        // 默认状态
        subjectID: '', //学科
        catalogID: '', //二级目录
        tags: '', //标签
        questionType: '', //试题类型
        difficulty: '', //难度
        direction: '', //方向
        creatorID: '', //录入人
        province: '', //省份列表
        city: '', //城市列表
      },
    }
  },
  methods: {
    // 获取整个from表单
    async getList() {
      // 获取学科列表
      const { data } = await list()
      // console.log(data)
      this.formInline.subjectList = data.items
      // 获取试题类型
      this.formInline.questionTypeList = questionType
      // 获取难度
      this.formInline.difficultyList = difficulty
      // 获取方向
      this.formInline.directionList = direction
      // 获取录入人
      const res = await list()
      const arr = res.data.items
      const newArr = arr.map((item) => {
        return item.username
      })
      this.formInline.creatorIDList = newArr
      // 获取省份列表
      const pro = await provinces()
      this.formInline.provinceList = pro
    },

    // 获取目录列表
    async subjectChange() {
      const id = this.formInline.subjectID
      const data = await detail({ id })
      this.formInline.catalogList = data
      // 获取标签列表
      this.formInline.tagsList = data
    },
    // 获取地区
    async proChange() {
      const index = this.formInline.province
      const city = await citys(index)
      this.formInline.cityList = city
    },

    // 清空表单
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
  },
  created() {
    this.getList()
  },
}
</script>

<style>
.inputwidth {
  width: 221px;
}
.addBtn {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.addBtn .span {
  color: pink;
  font-size: 12px;
}
.addBtn .el-button {
  font-size: 12px;
}
.clearDiv {
  float: right;
  margin-right: 22px;
}
.clearDiv .clearBtn {
  font-size: 12px;
}
</style>